<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Tourist from './components/Tourist.vue'
import CustomSex from './components/CustomSex.vue'
import CustomAge from './components/CustomAge.vue'
const router = useRouter()
const container = ref()

const handleScale = () => {
    const wRate = window.innerWidth / 1920
    const hRate = window.innerHeight / 1080
    return wRate < hRate ? wRate : hRate
}
const handelResize = () => {
    container.value.style.transform = `scale(${handleScale()}) translate(-50%,-50%)`
}
window.addEventListener('resize', () => {
    handelResize()
})

const time = ref('')
const getTime = () => {
    setInterval(() => {
        time.value = new Date()
    }, 1000)
}

const goHome = () => {
    router.push('/')
}
onMounted(() => {
    console.log(container.value);

    handelResize()
    getTime()
})
</script>

<template>
    <div class="screen">
        <div class="show_container" ref="container">
            <div class="top_container">
                <div class="left_container">
                    <div class="home_btn" @click="goHome">首页</div>
                </div>
                <div class="middle_container">
                    <div>智慧旅游可视化数据大屏</div>
                </div>
                <div class="right_container">
                    <div>统计报告</div>
                    <div>{{ time }}</div>
                </div>
            </div>
            <div class="bottom_container">
                <div class="left_container">
                    <div class="tourist">
                        <Tourist></Tourist>
                    </div>
                    <div class="custom_sex">

                    </div>
                    <div class="custom_age">

                    </div>
                </div>
                <div class="middle_container">2</div>
                <div class="right_container">3</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.screen {
    width: 100vw;
    height: 100vh;
    background: url('../../assets/images/rbg.png') no-repeat;
    background-size: cover;

    .show_container {
        width: 1920px;
        height: 1080px;
        //background-color: blue;
        transform-origin: left top;
        position: fixed;
        left: 50%;
        top: 50%;

        .top_container {
            height: 30px;
            display: flex;

            .left_container {
                flex: 1;
                //background-color: pink;
                border: 1px solid blue;
                display: flex;
                justify-content: end;
                align-items: center;

                .home_btn {
                    cursor: pointer;
                }
            }

            .middle_container {
                flex: 2;
                //background-color: black;
                border: 1px solid blue;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .right_container {
                flex: 1;
                //background-color: tomato;
                border: 1px solid blue;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

        }

        .bottom_container {
            display: flex;
            //background-color: red;
            height: 1050px;
            //background-color: lightblue;
            .left_container {
                flex: 1;
                height: 100%;
                //background-color: red;
                display: flex;
                flex-direction: column;
                .tourist {
                    flex: 1.5;
                    //background-color: hotpink;
                }
                .custom_sex {
                    flex: 1;
                    background-color: black;
                }
                .custom_age {
                    flex: 1;
                    background-color: tomato;
                }
            }

            .middle_container {
                flex: 2;
            }

            .right_container {
                flex: 1;
            }
        }
    }
}
</style>